<template>
	<div class="main">
		<div class="title">学科排名
			<div class="line"></div>
		</div>
		<div class="rankactive">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<!-- 根据大类加载页面 -->
				<el-tab-pane :label="ranklist[0]" name="0">
					<!-- 加载各种学科 -->
					<el-collapse v-model="activeNames" v-for="(item,index) in sujectlist" :key="index" accordion
						@change="handleChange">
						<el-collapse-item :title="item" :name="item">

							<!-- <el-row>
									<el-col :span="24"><el-tag class="tag" type='info'>{{item1}}</el-tag></el-col>
								</el-row> -->
							<span v-for="(item1,index1)  in schoollist" :key="index1" class="shcoollist">
								<el-tag class="tag">{{item1}}</el-tag>
							</span>
							<el-pagination @current-change="handleCurrentChange" :current-page.sync="qurey.startindex"
								:page-size="qurey.pagesize" layout="total, prev, pager, next" :total="total">
							</el-pagination>
							<!-- </div> -->
						</el-collapse-item>
					</el-collapse>
				</el-tab-pane>
				<el-tab-pane :label="ranklist[1]" name="1">
					<el-collapse v-model="activeNames" v-for="(item,index) in sujectlist" :key="index" accordion
						@change="handleChange">
						<el-collapse-item :title="item" :name="item">
							<span v-for="(item1,index1)  in schoollist" :key="index1" class="shcoollist">
								<el-tag class="tag">{{item1}}</el-tag>
							</span>
							<el-pagination @current-change="handleCurrentChange" :current-page.sync="qurey.startindex"
								:page-size="qurey.pagesize" layout="total, prev, pager, next" :total="total">
							</el-pagination>
						</el-collapse-item>
					</el-collapse>
				</el-tab-pane>
				<el-tab-pane :label="ranklist[2]" name="2">
					<el-collapse v-model="activeNames" v-for="(item,index) in sujectlist" :key="index" accordion
						@change="handleChange">
						<el-collapse-item :title="item" :name="item">
							<span v-for="(item1,index1)  in schoollist" :key="index1" class="shcoollist">
								<el-tag class="tag">{{item1}}</el-tag>
							</span>
							<el-pagination @current-change="handleCurrentChange" :current-page.sync="qurey.startindex"
								:page-size="qurey.pagesize" layout="total, prev, pager, next" :total="total">
							</el-pagination>
						</el-collapse-item>
					</el-collapse>
				</el-tab-pane>
				<el-tab-pane :label="ranklist[3]" name="3">
					<el-collapse v-model="activeNames" v-for="(item,index) in sujectlist" :key="index" accordion
						@change="handleChange">
						<el-collapse-item :title="item" :name="item">
							<span v-for="(item1,index1)  in schoollist" :key="index1" class="shcoollist">
								<el-tag class="tag">{{item1}}</el-tag>
							</span>
							<el-pagination @current-change="handleCurrentChange" :current-page.sync="qurey.startindex"
								:page-size="qurey.pagesize" layout="total, prev, pager, next" :total="total">
							</el-pagination>
						</el-collapse-item>
					</el-collapse>
				</el-tab-pane>
				<el-tab-pane :label="ranklist[4]" name="4">
					<el-collapse v-model="activeNames" v-for="(item,index) in sujectlist" :key="index" accordion
						@change="handleChange">
						<el-collapse-item :title="item" :name="item">
							<span v-for="(item1,index1)  in schoollist" :key="index1" class="shcoollist">
								<el-tag class="tag">{{item1}}</el-tag>
							</span>
							<el-pagination @current-change="handleCurrentChange" :current-page.sync="qurey.startindex"
								:page-size="qurey.pagesize" layout="total, prev, pager, next" :total="total">
							</el-pagination>
						</el-collapse-item>
					</el-collapse>
				</el-tab-pane>
				<el-tab-pane :label="ranklist[5]" name="5">
					<el-collapse v-model="activeNames" v-for="(item,index) in sujectlist" :key="index" accordion
						@change="handleChange">
						<el-collapse-item :title="item" :name="item">
							<span v-for="(item1,index1)  in schoollist" :key="index1" class="shcoollist">
								<el-tag class="tag">{{item1}}</el-tag>
							</span>
							<el-pagination @current-change="handleCurrentChange" :current-page.sync="qurey.startindex"
								:page-size="qurey.pagesize" layout="total, prev, pager, next" :total="total">
							</el-pagination>
						</el-collapse-item>
					</el-collapse>
				</el-tab-pane>
				<el-tab-pane :label="ranklist[6]" name="6">
					<el-collapse v-model="activeNames" v-for="(item,index) in sujectlist" :key="index" accordion>
						<el-collapse-item :title="item" :name="item">
							<span v-for="(item1,index1)  in schoollist" :key="index1" class="shcoollist">
								<el-tag class="tag">{{item1}}</el-tag>
							</span>
							<el-pagination @current-change="handleCurrentChange" :current-page.sync="qurey.startindex"
								:page-size="qurey.pagesize" layout="total, prev, pager, next" :total="total">
							</el-pagination>
						</el-collapse-item>
					</el-collapse>
				</el-tab-pane>
			</el-tabs>
		</div>
		<!-- 交底时间紧，没有优化，师弟或者师妹们看到记得用for循环优化一下啊 -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ranklist: [],
				activeName: '0',
				activeNames: "1",
				sujectlist: [],
				schoollist: [],
				total: 30,
				numberrecord:"",
				qurey: {
					"startindex": 1,
					"pagesize": 10
				}

			}
		},
		methods: {
			async getrankinglist() {
				const {
					data: res
				} = await this.$axios.get(`${this.baseURL}/SubjectRanking/selectAllSubjectClassification`)
				this.ranklist = res.data
				this.schoollist = []
				this.handleClick()

			},
			async handleClick() {
				this.qurey.startindex = 1
				const {
					data: res
				} = await this.$axios.post(
					`${this.baseURL}/SubjectRanking/selectSubjectAndCode?subjectClassification=${this.ranklist[this.activeName]}`
				)
				console.log(res)
				if (res.status != 200) {
					this.$message.error("获取数据失败")
				}
				this.sujectlist = res.data

			},
			async handleChange(val) {
				// this.qurey.startindex = 1
				if (val) {
					this.numberrecord = val.substring(0, 4)
					let number = val.substring(0, 4)
					const {
						data: res
					} = await this.$axios.post(
						`${this.baseURL}/SubjectRanking/selectSchool?professionalNumber=${number}&pageSize=${this.qurey.pagesize}&startPage=${this.qurey.startindex}`
						)
					if (res.status != 200) {
						this.$message.error("获取数据失败")
					}
					this.schoollist = res.data.data
					this.total = res.data.total
					// console.log(res.data.data)
				}
			},
			handleCurrentChange(newstart) {
				this.qurey.startindex=newstart
				this.handleChange(this.numberrecord)
			}


		},
		created() {
			this.getrankinglist()
		}
	}
</script>

<style scoped>
	.main {
		width: 100%;

	}

	.title {
		text-align: left;
		width: 100%;
		height: 62px;
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 700;
		text-align: left;
		color: #333333;
		margin-top: 15px;
		margin-left: 20px;
		position: relative;
	}

	.line {
		position: absolute;
		bottom: 0px;
		width: 1025px;
		height: 2px;
		background-color: rgba(51, 170, 255, .4);
	}

	.rankactive>>>.el-tabs__nav-wrap::after {
		position: static !important;
	}

	.el-tabs--top {
		padding: 0 20px;
	}

	.shcoollist {
		/* display:inline-block; */
		/* display:flex;
		justify-content: flex-start; */
		margin-top: 10px;
	}

	.tag {
		margin: 10px;
		font-size: 20px;
		width: 31%;
		height: 35px;
		line-height: 35px;
	}

	.rankactive>>>.el-collapse-item__header {
		font-size: 24px !important;
	}
</style>
